<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>奖项{{ config('vars.strings.nomination') }}</title>
@include('common-css')
<style>
.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}

.application-list {
}

.phase-tag {
    color: #1890ff;
    border: 1px solid #91d5ff;
    border-radius: 3px;
    background: #e6f7ff;
    font-size: 12px;
    padding: 2px 3px;
}

.ant-table-tbody > tr > td, .ant-table-thead > tr > th {
    vertical-align: middle;
    line-height: 25px;
}
</style>
</head>
<body>
<div id="app">

</div>
</body>
</html>

<script id="appTemplate" type="x-template">
<a-locale-provider :locale="antdLocale">
    <div class="container">
        @include('home.header')

        <main>
            <div class="common_container">

                @include('home.aside', ['selectedItem' => 'nominate'])

                <div class="common_content">
                    <div class="common_box">

                        <a-table class="application-list"
                                 rowKey="id"
                                 :columns="applicationListColumns"
                                 :dataSource="applications"
                        >
                            <span slot="award_name" slot-scope="text, record">
                                @{{ findAwardInfoById(record.award_id).name }}
                            </span>
                            <span slot="applicant" slot-scope="text, record">
                                @{{ record.applicant_name }}
                                <a-popover :title="record.applicant_name + '的联系方式'">
                                    <template slot="content">
                                        <table>
                                            <tr>
                                                <td width="30"><a-icon type="phone" /></td>
                                                <td>@{{ record.applicant_tel }}</td>
                                            </tr>
                                            <tr>
                                                <td><a-icon type="mail" /></td>
                                                <td>@{{ record.applicant_email }}</td>
                                            </tr>
                                        </table>
                                    </template>
                                    <a style="font-size: 12px;" href="">联系方式</a>
                                </a-popover>
                                <br />
                                @{{ record.applicant_org_name }}
                            </span>
                            <span slot="application_form" slot-scope="text, record">
                                <a :href="'/home/fill-form?id=' + record.id" target="_blank">
                                    <span>查看</span>
                                </a>
                            </span>
                            <span slot="status" slot-scope="text, record">
                                <span class="phase-tag">@{{ record.status_info.phase }}阶段</span>
                                <div>@{{ record.status_info.status }}</div>
                            </span>
                            <span slot="todo" slot-scope="text, record">
                                <span class="orange">@{{ record.status_info.nominator_todo }}</span>
                            </span>
                            <span slot="operations" slot-scope="text, record">
                                <template v-if="record.status_id == 'A2'">
                                    <a-popconfirm title="确认{{ config('vars.strings.nomination') }}？"
                                                  @confirm="handleAgreeToNominate(record)" okText="是"
                                                  cancelText="否">
                                        <a-button type="primary" size="small"
                                                  :disabled="submittingApplication">同意{{ config('vars.strings.nomination') }}</a-button>
                                    </a-popconfirm>
                                    <a-popconfirm title="确认退回？"
                                                  @confirm="handleReturnApplication(record)" okText="是"
                                                  cancelText="否">
                                        <a-button size="small"
                                                  :disabled="submittingApplication">退回修改</a-button>
                                    </a-popconfirm>
                                </template>
                            </span>
                        </a-table>

                    </div>
                </div>
            </div>
        </main>

    </div>
</a-locale-provider>
</script>

@include('common-js')

<script>
const applicationListColumns = [{
    width: 40,
    title: '序号',
    dataIndex: 'num'
}, {
    width: 80,
    title: '奖项',
    dataIndex: 'award_name',
    scopedSlots: {
        customRender: 'award_name'
    }
}, {
    width: 100,
    title: '申报者',
    dataIndex: 'applicant',
    scopedSlots: {
        customRender: 'applicant'
    }
}, {
    width: 80,
    title: '申报书',
    dataIndex: 'application_form',
    scopedSlots: {
        customRender: 'application_form'
    }
}, {
    width: 100,
    title: '申报状态',
    dataIndex: 'status',
    scopedSlots: {
        customRender: 'status'
    }
}, {
    width: 100,
    title: '待办事项',
    dataIndex: 'nominator_todo',
    scopedSlots: {
        customRender: 'todo'
    }
}, {
    width: 80,
    title: '操作',
    key: 'operations',
    scopedSlots: {
        customRender: 'operations'
    }
}];

var awardsInfo = {!! json_encode(array_values(config('vars.awards')), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};
var applications = {!! json_encode($applications, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};
function processApplicationsData(applications) {
    var n = 1
    applications.forEach(item => {
        item.num = n
        n += 1
    })
}

processApplicationsData(applications)

Vue.prototype.$axios = axios
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        applications: applications,
        submittingApplication: false,
        awardsInfo: awardsInfo,
        applicationListColumns: applicationListColumns,
        changePasswordDialogVisible: false,
        passwordInfo: {
            password: '',
            passwordConfirm: ''
        },
        antdLocale: antd.locales.zh_CN
    },
    computed: {},
    mounted() {
    },
    methods: {
        handleAgreeToNominate(application) {
            console.log('application', application)
            this.submittingApplication = true
            antd.message.loading('正在处理，请稍候', 0)
            axios.post('/api/award/nominator-agree-to-nominate', {
                application_id: application.id
            }).then(res => {
                console.log(res)
                var data = res.data
                if (data.ok) {
                    antd.message.success('提交成功')
                    this.reloadData()
                } else {
                    antd.message.warn(data.message, 3)
                }
                this.submittingApplication = false
            })
        },
        handleReturnApplication(application) {
            console.log('application', application)
            this.submittingApplication = true
            antd.message.loading('正在处理，请稍候', 0)
            axios.post('/api/award/nominator-return-application', {
                application_id: application.id
            }).then(res => {
                console.log(res)
                var data = res.data
                if (data.ok) {
                    antd.message.success('退回成功')
                    this.reloadData()
                } else {
                    antd.message.warn(data.message, 3)
                }
                this.submittingApplication = false
            })
        },
        findAwardInfoById(id) {
            return this.awardsInfo.filter(item => {
                return item.id == id
            })[0]
        },
        reloadData() {
            axios.post('/api/award/get-applications', {
                role: 'nominator'
            }).then(res => {
                    antd.message.destroy()
                    var applications = res.data
                    console.log(applications)
                    processApplicationsData(applications)
                    this.applications = applications
                })
        },
        handleHeaderDropdownItemClick: handleHeaderDropdownItemClick,
        handleChangePasswordOk: handleChangePassword
    }
})
</script>